<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户管理</title>
	<link rel="stylesheet" href="../EasyUI-1.5.3/themes/default/easyui.css">
    <link rel="stylesheet" href="../css/icon.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/jquery-1.8.0.min.js"></script>
    <script src="../EasyUI-1.5.3/jquery.min.js"></script>
    <script src="../EasyUI-1.5.3/jquery.easyui.min.js" ></script>
    <script src="../EasyUI-1.5.3/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
</head>
<body>
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',border:true,split:true," title="分类管理" style="width:150px; padding:5px;">
            <ul id="tt" class="easyui-tree"></ul>
        </div>
        <div data-options="region:'center',border:false">
            <!-- Begin of toolbar -->
            <div id="wu-toolbar">
                <div class="wu-toolbar-button">
                    <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAdd()" plain="true">添加</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="newsClear()" plain="true">删除</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="remove()" plain="true">保存</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-application-side-tree" onclick="lookAll()" plain="true">显示全部</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-reload" onclick="reload()" plain="true">刷新</a>
                </div>
                <div class="wu-toolbar-search">
                    <label>起始时间：</label><input class="easyui-datebox" style="width:100px">
                    <label>结束时间：</label><input class="easyui-datebox" style="width:100px">
                    <label>用户组：</label>
                    <!--下面的保留作为备用项-->
                    <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                        <option value="0">选择用户组</option>
                        <option value="1">黄钻</option>
                        <option value="2">红钻</option>
                        <option value="3">蓝钻</option>
                    </select>

                    <label>关键词：</label><input class="wu-text" style="width:100px">
                    <a href="#" class="easyui-linkbutton" iconCls="icon-search">开始检索</a>
                </div>
            </div>
            <!-- End of toolbar -->
            <!-- <table id="content-data" toolbar="#wu-toolbar"></table> -->
           <table id="dg" class="easyui-datagrid" style="width:100%;height:200%">
           <!-- data-options="
                iconCls: 'icon-edit',
                singleSelect: true,
                url: 'http://localhost:3000/content/list',
                method:'post',
                rownumbers:true,
                singleSelect:false,
                pageSize:4,
                pageList:[4,8,12,16],
                pagination:true,
                multiSort:true,
                fitColumns:true,
                fit:true,
                onClickCell: onClickCell" -->
                <!-- <thead>
                    <tr>
                        <th data-options="field:'null',checkbox:true"></th>
                        <th data-options="field:'title',title:'标题',width:150,editor:'text',sortable:true"></th>
                        <th data-options="field:'author',title:'作者',width:50,sortable:true"></th>
                        <th data-options="field:'other_title',title:'副标题',width:60,editor:'text',sortable:true"></th>
                        <th data-options="field:'classify',title:'类别',width:60,sortable:true"></th>
                        <th data-options="field:'tips',title:'标签',editor:'text',width:50,sortable:true"></th>
                        <th data-options="field:'date',title:'日期',width:120,sortable:true"></th>
                        <th data-options="field:'content',title:'内容',width:280,sortable:true,editor:'text'"></th>
                        <th data-options="field:'admin',title:'发布者',width:60,sortable:true,editor:'text'"></th>
                    </tr>
                </thead> -->
            </table>
        </div>
    </div>

    <script type="text/javascript">
        //将树引入
        $('#tt').tree({//引入tree
            animate:true,
            url:'http://localhost:3000/cate/list',
            method:'get',
            onClick:function(node){
                var id = null;
                id = node._id;
                initList(id);
            }
        });

        //树遍历
        function initList(cateId){
            $('#dg').datagrid({
                url:'http://localhost:3000/content/list',
                method:'post',
                striped:true,   //设置表单渐变色
                queryParams:{classifyID:cateId},
                rownumbers:true,
                singleSelect:true,
                pageSize:10,
                pageList:[10,20,30,40],
                pagination:true,
                multiSort:true,
                fitColumns:true,
                // fit:true,
                onClickCell: onClickCell,
                columns:[[
                    { field:'null',checkbox:true},
                    { field:'title',title:'标题',width:$(this).width()*0.08,sortable:true,editor:'text'},
                    { field:'author',title:'作者',width:$(this).width()*0.03,sortable:true,editor:'text'},
                    { field:'other_title',title:'副标题',width:$(this).width()*0.04,sortable:true,editor:'text'},
                    { field:'classify',title:'类别',width:$(this).width()*0.04,sortable:true},
                    { field:'tips',title:'标签',width:$(this).width()*0.04,sortable:true,editor:'text'},
                    { field:'date',title:'日期',width:$(this).width()*0.04,sortable:true},
                    { field:'content',title:'内容',width:$(this).width()*0.08,sortable:true,editor:'text'},
                    { field:'admin',title:'发布者',width:$(this).width()*0.04,sortable:true},
                    { field:'operate',title:'操作',align:'center',width:$(this).width()*0.08,
                        formatter:function(value, row, index){
                            var str = '<a href="javascript:;" name="edit" class="easyui-linkbutton" onClick="newsEdit()" ></a><a href="#" onClick="newsClear()" name="clear" class="easyui-linkbutton" ></a>';
                            return str;
                        }}
                    ]],
                    onLoadSuccess:function(data){
                       $("a[name='edit']").linkbutton({text:'修改',plain:true,iconCls:'icon-edit'});
                       $("a[name='clear']").linkbutton({text:'删除',plain:true,iconCls:'icon-remove'});
                    }
            });
        }


        //刷新表单
        function reload(){
            $('#dg').datagrid('reload');
            $('#tt').tree('reload');
        }


        //获取全部数据按钮
        function lookAll(){
            // dataShowAll();
            window.location.reload();
        }



        // 对数据表格的操作
        dataShowAll();
        function dataShowAll(){
            $('#dg').datagrid({
            url:'http://localhost:3000/content/list',
            method:'post',
            striped:true,   //设置表单渐变色
            nowrap:false,    //换行显示
            rownumbers:true,
            singleSelect:false,
            pageSize:10,
            pageList:[10,20,30,40],
            pagination:true,
            multiSort:true,
            fitColumns:true,
            // fit:true,
            // onClickCell: onClickCell,
            columns:[[
                { field:'null',checkbox:true},
                { field:'title',title:'标题',width:$(this).width()*0.08,sortable:true,editor:'text'},
                { field:'author',title:'作者',width:$(this).width()*0.03,sortable:true,editor:'text'},
                { field:'other_title',title:'副标题',width:$(this).width()*0.04,sortable:true,editor:'text'},
                { field:'classify',title:'类别',width:$(this).width()*0.04,sortable:true},
                { field:'tips',title:'标签',width:$(this).width()*0.04,sortable:true,editor:'text'},
                { field:'date',title:'日期',width:$(this).width()*0.04,sortable:true},
                { field:'content',title:'内容',width:$(this).width()*0.08,sortable:true,editor:'text'},
                { field:'admin',title:'发布者',width:$(this).width()*0.04,sortable:true},
                { field:'operate',title:'操作',align:'center',width:$(this).width()*0.08,
                    formatter:function(value, row, index){
                        var str = '<a href="javascript:;" name="edit" class="easyui-linkbutton" onClick="newsEdit()" ></a><a href="#" onClick="newsClear()" name="clear" class="easyui-linkbutton" ></a>';
                        return str;
                    }}
                ]],
                onLoadSuccess:function(data){
                   $("a[name='edit']").linkbutton({text:'修改',plain:true,iconCls:'icon-edit'});
                   $("a[name='clear']").linkbutton({text:'删除',plain:true,iconCls:'icon-remove'});
                }
            });
        }


        //头部添加按钮的tab
        function openAdd(){
            addTab_public('发布新闻','file/layout-news.html','icon-user-group',1);
        }

        //每条数据的进行修改的操作
        function newsEdit(){
            var items = $('#dg').datagrid('getSelections');  //选中的数据
            addTab_public('发布新闻','file/layout-news.html?'+items[0]._id,'icon-user-group',1);
            
            // location.replace('layout-news.html');
            // $("#news-form-content").form('load',items);
        }
        //每条数据的删除
        function newsClear(){
            var items = $('#dg').datagrid('getSelections');
            $.messager.confirm('信息提示','确定要删除该记录？', function(result){
                if(result){//result是一个true的布尔值
                    var ids = [];
                    $(items).each(function(){
                        ids.push(this._id);
                    });
                    $.ajax({
                        url:'http://localhost:3000/content/data/'+ids,
                        type:'DELETE',
                        success:function(data){
                            console.log(data);
                            if(data){
                                $.messager.alert('信息提示','删除成功！','info',()=>{    
                                    reload();
                                });

                            }
                            else{
                                $.messager.alert('信息提示','删除失败！','info');
                            }
                        }
                    })
                }else{

                }
            });
        }

        $.extend($.fn.datagrid.methods, {
            editCell: function(jq,param){
                return jq.each(function(){
                    var opts = $(this).datagrid('options');
                    var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
                    for(var i=0; i<fields.length; i++){
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor1 = col.editor;
                        if (fields[i] != param.field){
                            col.editor = null;
                        }
                    }
                    $(this).datagrid('beginEdit', param.index);
                    for(var i=0; i<fields.length; i++){
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor = col.editor1;
                    }
                });
            }
        });
        
        var editIndex = undefined;
        function endEditing(){
            if (editIndex == undefined){return true}
            if ($('#dg').datagrid('validateRow', editIndex)){
                $('#dg').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }
        function onClickCell(index, field){
            if (endEditing()){
                $('#dg').datagrid('selectRow', index)
                        .datagrid('editCell', {index:index,field:field});
                editIndex = index;
            }
        }
    </script>
    <script type="text/javascript" src="../js/changeTable.js"></script>
</body>
</html>